/**
* Created by yyr on 2018/3/14
*已投资基金》头部编辑
*/
<template>
    <div>
        <div class="ca-box ca-p-20 ca-m-t-28">
            <el-row v-show="!isAdd">
                <el-col :span="24" class="ca-align-right ca-m-b-10">
                    <el-button type="primary" @click="saveFundHead()" size="medium">保存</el-button>
                    <el-button  @click="cancel()" size="medium">取消</el-button>
                </el-col>
            </el-row>
            <div>
                <el-form label-width="170px" :rules="rules" ref="ruleForm" :model="fund">
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="基金全称" labelWidth="110px" prop="fundFullname">
                                <el-input  placeholder="请输入内容" v-model="fund.fundFullname" :maxlength="100"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="1">
                            <el-form-item label="基金简称" labelWidth="110px" prop="fundName">
                                <el-input   placeholder="请输入内容" v-model="fund.fundName" :maxlength="100"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="投资期(年)"  labelWidth="110px" prop="investmentPeriod">
                                <el-input type="number"  placeholder="请输入内容" v-model="fund.investmentPeriod"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="1">
                            <el-form-item label="退出期(年)"  labelWidth="110px" prop="exitPeriod">
                                <el-input type="number"  placeholder="请输入内容" v-model="fund.exitPeriod"></el-input>
                            </el-form-item>
                        </el-col>
                        <!--<el-col :span="8">
                            <el-form-item label="基金状态："  labelWidth="110px">
                                <el-select placeholder="请选择" style="width:100%" v-model="fund.fundState">
                                    <el-option
                                        v-for="item in initView.fundState"
                                        :label="item.name"
                                        :key="item.id"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>-->
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="基金类别" labelWidth="110px">
                                <el-select v-model="fund.fundCategory" placeholder="请选择" style="width: 100%">
                                    <el-option
                                        v-for="item in initView.fundCategory"
                                        :label="item.name"
                                        :key="item.id"
                                        :value="item.id">
                                    </el-option>
                                    </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="1">
                            <el-form-item label="成立时间" labelWidth="110px" prop="establishTime">
                                <el-date-picker type="date"
                                                v-model="fund.establishTime"
                                                placeholder="选择日期"
                                                style="width: 100%;">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="基金类型" labelWidth="110px">
                                <el-select  placeholder="请选择" style="width:100%;" v-model="fund.fundType">
                                    <el-option
                                        v-for="item in initView.fundType"
                                        :label="item.name"
                                        :key="item.id"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" :offset="1">
                            <el-form-item label="基金规模(万元)" labelWidth="110px" prop="fundScale">
                                <el-input  placeholder="请输入内容" v-model="fund.fundScale"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="11">
                            <el-form-item label="基金经理" labelWidth="110px">
                                <el-select v-model="fundUser"
                                           filterable
                                           @change="changeFundUser"
                                           placeholder="请选择" style="width:100%;">
                                    <el-option
                                        v-for="item in userOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="基金管理团队"  labelWidth="110px">
                                <el-select v-model="userTeamItem"
                                           @change="changeUserTeam"
                                           placeholder="请选择"
                                           filterable
                                           style="width:100%">
                                    <el-option
                                        v-for="item in userOptions"
                                        :label="item.label"
                                        :key="item.value"
                                        :value="item.value"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="10" class="ca-m-l-10">
                            <el-tag
                                v-for="item in fundUserList"
                                v-if="item.userType == 2"
                                :key="item.id"
                                :closable="true"
                                :close-transition="false"
                                @close="closeUserItem(item)"
                                :type="item.type" class="ca-m-r-10 ca-m-t-8">
                                {{item.userName}}
                            </el-tag>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="7">
                            <el-form-item label="投资行业" labelWidth="110px">
                                <el-select v-model="industry"
                                           @change="changeIndustry"
                                           placeholder="请选择"
                                           style="width:100%">
                                    <el-option
                                        v-for="item in initView.industry"
                                        :label="item.name"
                                        :key="item.id"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="15" class="ca-m-l-20 ca-m-t-8">
                            <el-tag
                                v-for="item in industryList"
                                :key="item.id"
                                :closable="true"
                                :close-transition="false"
                                @close="closeIndustry(item)"
                                :type="item.type" class="ca-m-r-10">
                                {{item.industry | getNameById('industry')}}
                            </el-tag>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
//    import {api} from '../api';
//    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                itemId: this.$route.params.fundId,
                initView: {
                    fundType: [{id: '', name: '请选择'}, ...this.$store.state.user.dictionaryMap.fundType],//基金类型
                    industry: this.$store.state.user.dictionaryMap.industry, //投资方向
                    fundState: this.$store.state.user.dictionaryMap.foundation,// 设立状态
                    userEntityList: this.$store.state.user.department.userEntityList,//客户
                    fundCategory: [{id: '', name: '请选择'}, ...this.$store.state.user.dictionaryMap.fundCategory],//基金类别
                },
                fundData: {},
                fundAnsatEstList: [],
//                industryList: [],
                userOptions: [],
                fundUser: '',//基金经理
                industry: '',//投资方向
                userTeamItem: '',
                rules: {
                    fundFullname: [
                        { required: true, message: '请输入基金全称', trigger: 'blur' },
                    ],
                    fundName: [
                        { required: true, message: '请输入基金简称', trigger: 'blur' },
                    ],
                    investmentPeriod: [
                        { required: true, message: '请输入投资期', trigger: 'blur' },
                        { validator: this.checkIntegerNumber, trigger: 'blur',type: 'number'}
                    ],
                    exitPeriod: [
                        { required: true, message: '请输入退出期', trigger: 'blur' },
                        { validator: this.checkIntegerNumber, trigger: 'blur',type: 'number'}
                    ],
                    fundScale: [
                        { validator: this.validateMoneyNumber, trigger: 'blur' }
                    ],
                    establishTime: [
                        { required: true, message: '请输入成立时间', trigger: 'blur'}
                    ],
                },
            }
        },
        props: {
            isAdd: {
                type: Boolean,
                default() {
                    return false;
                }
            },
            fund: {
                type: Object
            },
            fundUserList: {
                type: Array
            },
            industryList: {
                type: Array
            }
        },
        watch: {
            'fund.establishTime': function ( val ) {
                if (val) {
                    this.$emit('watchTime',val)
                }
            },
//            'industryList': function ( val ) {
//                if (val) {
//                    this.$emit('industryListChange',val)
//                }
//            },
        },
        created() {
            if (this.itemId | this.fundUserList.length > 0) {
                //修改
                this.fundUserList.map(item=>{
                    if (item.userType === '1') {
                        this.fundUser = item.userName;
                    }
                })
            }
        },
        mounted() {
            this.userOptions = this.initView.userEntityList.map(item => {
                return { value: item.id, label: item.userName };
            });
        },
        methods: {
            //添加投资方向tag
            changeIndustry(industryItem) {
//                this.$emit('changeIndustry',industryItem)
                if (this.isAdd) { //添加
                    let flag = false;
                    for (let i of this.industryList) {
                        if (i.industry === industryItem) {
                            flag = true;
                            return;
                        }
                    }
                    if (!flag) {
                        this.industryList.push({industry: industryItem,fundId: '',id: ''})
                    }
                } else {// 修改
                    let flag = false;
                    for (let i of this.industryList) {
                        if (i.industry === industryItem) {
                            flag = true;
                            return;
                        }
                    }
                    if (!flag) {
                        this.industryList.push({industry: industryItem,fundId: this.itemId,id: ''})
                    }
                }
            },
            //关闭投资方向tag
            closeIndustry(tag) {
//                this.$emit('closeIndustry',tag)
                this.industryList.splice(this.industryList.indexOf(tag),1);
            },
            //保存
            saveFundHead() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.$emit('saveFundHead',this.fund,this.fundUserList)
                    } else {
                        return false;
                    }
                });
            },
            //取消
            cancel() {
                this.$emit('isEdit', false);
            },
            //改变基金经理
            changeFundUser(val) {
                this.$emit('changeFundUser',val)
            },
            //添加管理团队
            changeUserTeam(val) {
                this.$emit('changeUserTeam',val);
            },
            //关闭管理团队
            closeUserItem(tag) {
                this.fundUserList.splice(this.fundUserList.indexOf(tag),1);
            },
            //验证
            validateAdd() {
                let isSave = null;
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        isSave = true;
                    } else {
                        isSave = false;
                    }
                })
                return isSave;
            },
        },
        components: {
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
